<script setup lang="ts">
interface CheckIconProps {
  size?: number
}

const props = withDefaults(defineProps<CheckIconProps>(), {
  size: 20
})
</script>

<template>
  <svg
    :width="props.size"
    :height="props.size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="check-icon"
  >
    <!-- 背景圆圈 -->
    <circle cx="12" cy="12" r="11" fill="url(#checkGradient)" />
    <!-- 对勾 -->
    <path
      d="M7 12L10.5 15.5L17 9"
      stroke="white"
      stroke-width="2.5"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <defs>
      <linearGradient id="checkGradient" x1="0" y1="0" x2="24" y2="24">
        <stop offset="0%" stop-color="#4FACFE" />
        <stop offset="100%" stop-color="#00F2FE" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.check-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(79, 172, 254, 0.2));
}
</style>
